<template>
  <div class="app-container">
    <steps :active-step="2" />
    <div class="box">
      <img :src="publisCourse.cover" alt="课程封面" />
      <div class="content">
        <h1>{{ publisCourse.title }}</h1>
        <p>共{{ publisCourse.lessonNum }}课时</p>
        <p>
          所属分类：{{ publisCourse.subjectOne }}-{{ publisCourse.subjectTwo }}
        </p>
        <p>课程讲师：{{ publisCourse.teacherName }}</p>
        <h2 style="color: red">￥{{ publisCourse.price }}</h2>
      </div>
    </div>
    <el-button type="primary" @click="handlePre">上一步</el-button>
    <el-button type="primary" @click="handleNext">发布</el-button>
  </div>
</template>

<script>
import Steps from "./components/steps";
import courseApi from "@/api/course";
export default {
  components: {
    Steps,
  },
  data() {
    return {
      courseId: null,
      publisCourse: {},
    };
  },
  created() {
    if (this.$route.query.courseId) {
      this.courseId = this.$route.query.courseId;
      this.getData();
    }
  },
  methods: {
    async getData() {
      let res = await courseApi.getPublishCourse(this.courseId);
      if (res.success) {
        this.publisCourse = res.data.item;
      } else {
        return this.$message.error(res.msg);
      }
    },
    handlePre() {
      this.$router.go("-1");
    },
    handleNext() {
      this.$confirm("确定发布吗？", "确认信息", {
        distinguishCancelAndClose: true,
        confirmButtonText: "发布",
        cancelButtonText: "取消",
      }).then(async () => {
        let res = await courseApi.publishCourse(this.courseId);
        if (res.success) {
          this.$message.success("课程发布成功");
          this.$router.push({
            path: "/course/list",
          });
        }else {
          return this.$message.error(res.msg)
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
  background: #ccc;
  display: flex;
  justify-content: space-between;
  img {
    width: 40%;
    height: auto;
  }
  .content {
    width: 60%;
    box-sizing: border-box;
    padding: 40px;
    p {
      margin-bottom: 30px;
    }
  }
}
</style>